<template>
	<view class="store-list-container page-container">
		<!-- 搜索栏 -->
		<SearchBar @search="onSearch" :placeholder="`搜索 ${searchKeyword}`" :auto-navigate="false" />

		<!-- 门店列表 -->
		<view class="store-list">
			<view class="store-card" v-for="(store, index) in storeList" :key="index" @click="goToStoreDetail(store)">
				<view class="store-info">
					<view class="store-header">
						<text class="store-name">{{ store.store_name }}</text>
						<view class="store-status" :class="store.is_open_now===1?'open':'closed'">
							{{ store.is_open_now===1?'营业中':'已打烊' }}
						</view>
					</view>
					<view class="store-address">
						<u-icon name="map" size="16" color="#666"></u-icon>
						<text class="address-text">{{ store.pcas }} {{ store.address }}</text>
					</view>
					<view class="store-contact">
						<u-icon name="phone" size="16" color="#666"></u-icon>
						<text class="contact-text">{{ store.contact }}</text>
					</view>
					<view class="store-time">
						<u-icon name="clock" size="16" color="#666"></u-icon>
						<text class="time-text">{{ store.businessHours }}</text>
					</view>
				</view>
				<view class="store-actions">
					<button class="action-btn call-btn" @click.stop="callStore(store.contact)">
						<u-icon name="phone-fill" size="16" color="#52a58a"></u-icon>
						<text class="btn-text">电话</text>
					</button>
					<button class="action-btn nav-btn" @click.stop="navigateToStore(store)">
						<u-icon name="map-fill" size="16" color="#52a58a"></u-icon>
						<text class="btn-text">导航</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="storeList.length === 0">
			<image src="@/static/images/cart-green.png" mode="aspectFit" class="empty-image"></image>
			<text class="empty-text">暂无门店信息</text>
			<text class="empty-desc">请尝试其他搜索关键词</text>
		</view>
	</view>
</template>

<script>
	import SearchBar from '@/components/SearchBar/SearchBar.vue'
	export default {
		data() {
			return {
				searchKeyword: '',
				hasSearched: false,
				recordCount: 0,
				page: 1,
				limit: 10,
				storeList: []
			}
		},
		computed: {

		},
		onLoad(options) {
			if (options.q) {
				this.searchKeyword = decodeURIComponent(options.q)
			}
			this.onSearch(this.searchKeyword)
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			if (!this.hasSearched) {
				this.page = 1
				this.recordCount = 0
				this.storeList = []
				this.loadDataList()
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			// 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求
			const page = this.page
			const limit = this.limit
			const recordCount = this.recordCount
			if (!this.hasSearched && page * limit < recordCount) {
				this.page++
				setTimeout(() => {
					this.loadDataList()
				}, 500)
			}
		},
		methods: {
			onSearch(keyword) {
				this.searchKeyword = keyword
				this.page = 1
				this.recordCount = 0
				this.storeList = []
				this.loadDataList()
			},
			loadDataList() {
				if (this.hasSearched) {
					return false
				}
				this.hasSearched = true
				this.$api.agent.GetUnlineStoreList({
					page: this.page,
					limit: this.limit,
					keyword: this.searchKeyword
				}).then(res => {
					this.hasSearched = false
					this.recordCount = res.count
					const today = new Date().getDay() + 1;
					res.data.forEach(item => {
						// 营业时间，Key:用数字表示周几，{1:"12:00-16:00",2:"12:00-16:00",5:"19:00-02:00",6:"12:00-16:00",7:"12:00-16:00"}
						const dayMap = this.$tools.parseJsonObject(item.day_map);
						if (dayMap) {
							item.businessHours = dayMap[today]
						}
					})
					this.storeList = this.storeList.concat(res.data)
				}).catch(err => {
					this.hasSearched = false
					if (this.page > 0) {
						this.page--
					}
				})
			},

			// 拨打电话
			callStore(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					fail: () => {
						uni.showToast({
							title: '拨号失败',
							icon: 'none'
						})
					}
				})
			},

			// 导航到门店
			navigateToStore(store) {
				uni.openLocation({
					latitude: store.latitude,
					longitude: store.longitude,
					name: store.store_name,
					address: store.address,
					fail: () => {
						uni.showToast({
							title: '导航失败',
							icon: 'none'
						})
					}
				})
			},

			// 跳转到门店详情
			goToStoreDetail(store) {
				uni.navigateTo({
					url: `/pages/store/detail?id=${store.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.store-list-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	.page-header {
		background: linear-gradient(135deg, #52a58a 0%, #459a7e 100%);
		padding: 60rpx 30rpx 40rpx;
		text-align: center;
		color: white;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 16rpx;
		display: block;
	}

	.page-subtitle {
		font-size: 26rpx;
		opacity: 0.9;
		display: block;
	}

	.search-section {
		padding: 30rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #f8f9fa;
		border-radius: 25rpx;
		padding: 20rpx 30rpx;
		gap: 16rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.store-list {
		padding: 0 20rpx;
	}

	.store-card {
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.store-info {
		flex: 1;
		margin-right: 20rpx;
	}

	.store-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.store-name {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		flex: 1;
		margin-right: 20rpx;
	}

	.store-status {
		padding: 6rpx 12rpx;
		border-radius: 12rpx;
		font-size: 22rpx;
		font-weight: 500;
	}

	.store-status.open {
		background-color: #d4edda;
		color: #155724;
	}

	.store-status.closed {
		background-color: #f8d7da;
		color: #721c24;
	}

	.store-address,
	.store-contact,
	.store-time {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
		gap: 12rpx;
	}

	.address-text,
	.contact-text,
	.time-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	.store-actions {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.action-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		background-color: transparent;
		border: 1rpx solid #52a58a;
		border-radius: 12rpx;
		padding: 16rpx 20rpx;
		min-width: 100rpx;
	}

	.btn-text {
		font-size: 22rpx;
		color: #52a58a;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		text-align: center;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	.empty-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}
</style>